<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
        body, div, ul, li, a, img {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        img {
            display: block;
            border: none;
        }

        a {
            display: block;
            text-underline: none;
            color: #000;
        }

        a:hover, a:active, a:target {
            text-underline: none;
            color: #000;
        }

        /*设置轮播图的样式*/
        .banner {
            position: relative;
            margin: 20px auto;
            width: 1000px;
            height: 300px;
            overflow: hidden;
        }

        .banner .inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 5000px;
            height: 300px;
            overflow: hidden;
        }

        .banner .inner img {
            float: left;
            width: 1000px;
            height: 300px;
        }

        /*设置焦点的样式*/
        .banner .tip {
            position: absolute;
            bottom: 20px;
            right: 20px;
            overflow: hidden;
        }

        .banner .tip li {
            float: left;
            margin-left: 10px;
            width: 18px;
            height: 18px;
            background: #7cc4e7;
            cursor: pointer;
            border-radius: 50%;
        }

        .banner .tip li.bg {
            background: #ff0000;
        }

        /*设置左右切换按钮的样式*/
        .banner a {
            display: none;
            position: absolute;
            top: 50%;
            margin-top: -22.5px;
            width: 30px;
            height: 45px;
            background: url("img/pre.png") no-repeat 0 0;
            opacity: 0.3;
            filter: alpha(opacity=30);
        }

        .banner a:hover {
            opacity: 1;
            filter: alpha(opacity=100);
        }

        .banner a.btnLeft {
            left: 20px;
        }

        .banner a.btnRight {
            right: 20px;
            background-position: -50px 0;
        }
    </style>
</head>
<body>
<div class="banner" id="banner">
    <div class="inner" id="inner">
        <img src="img/1.jpg"/>
        <img src="img/2.jpg"/>
        <img src="img/3.jpg"/>
        <img src="img/4.jpg"/>
        <img src="img/1.jpg"/>
    </div>
    <ul class="tip" id="tip">
        <li class="bg"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <a href="javascript:;" class="btnLeft" id="btnLeft"></a>
    <a href="javascript:;" class="btnRight" id="btnRight"></a>
</div>

<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript">
    (function () {
        var step = 0, autoTimer = null, interval = 2000;
        var banner = document.getElementById("banner"),
                inner = document.getElementById("inner"),
                tip = document.getElementById("tip"),
                tipList = tip.getElementsByTagName("li"),
                btnLeft = document.getElementById("btnLeft"),
                btnRight = document.getElementById("btnRight");

        //->实现焦点对齐
        function changeTip() {
            var tempStep = step;
            tempStep >= tipList.length ? tempStep = 0 : null;
            for (var i = 0; i < tipList.length; i++) {
                tipList[i].className = i === tempStep ? "bg" : null;
            }
        }

        //->实现自动轮播图
        autoTimer = window.setInterval(autoMove, interval);
        function autoMove() {
            step++;
            if (step > 4) {
                step = 1;
                inner.style.left = 0;
            }
            liAnimate(inner, {left: -step * 1000}, 500);
            changeTip();
        }

        //->鼠标进入轮播图区域停止自动轮播,鼠标离开自动轮播开启
        banner.onmouseenter = function () {
            window.clearInterval(autoTimer);
            btnLeft.style.display = btnRight.style.display = "block";
        };

        banner.onmouseleave = function () {
            autoTimer = window.setInterval(autoMove, interval);
            btnLeft.style.display = btnRight.style.display = "none";
        };


        //->实现焦点轮播
        tipMove();
        function tipMove() {
            for (var i = 0; i < tipList.length; i++) {
                var cur = tipList[i];
                cur.index = i;
                cur.onclick = function () {
                    step = this.index;
                    liAnimate(inner, {left: -step * 1000}, 500, 3);
                    changeTip();
                }
            }
        }

        //->实现左右切换
        btnLeft.onclick = function () {
            step--;
            if (step < 0) {
                step = 3;
                inner.style.left = -4000 + "px";
            }
            liAnimate(inner, {left: -step * 1000}, 500, 4);
            changeTip();
        };

        btnRight.onclick = autoMove;
    })();



</script>
</body>
</html>